<template>
    <el-form-item label="更多人群" prop="title">
        <el-radio-group v-model="createform.audience.crowdRadio" size="small" @change="changeCrowd">
            <el-radio-button label="1">不限</el-radio-button>
            <el-radio-button label="2">更多人群</el-radio-button>
        </el-radio-group>
        <el-form-item label="" :prop="`audience.allCrowdCheck`" v-if="createform.audience.crowdRadio==2" key="allCrowdCheck">
            <div class="cascader_box cascader_box2">
                <div class="flexbox flexbetween">
                    <div class="cascader_left" style="width:450px">
                        <div class="cas_header2 flexbox flexcenter">
                            <el-tabs v-model="createform.audience.crowdTab" @tab-click="sessionSave" class="tab_style">
                                <el-tab-pane label="平台精选" name="1"></el-tab-pane>
                                <el-tab-pane label="自定义人群" name="2"></el-tab-pane>
                            </el-tabs>
                        </div>
                        <div v-loading="pt_loadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                            <div class="over_box" style="height:231px;padding:10px 0" v-if="createform.audience.crowdTab==1" key="ptjx">
                                <el-checkbox-group v-model="createform.audience.plartformVal" class="talent_check" @change="checkPlartCrowd">
                                    <el-checkbox :label="item.retargeting_tags_id+''" v-for="(item,index) in createform.audience.plartformCrow" :key="index">
                                        <div class="flex flexbox flexcenter">
                                            <div class="talent_info flex">
                                                <div class="talent_name flexbox flexcenter">
                                                    <span>{{item.name}}</span>
                                                    <!-- <span class="el-icon-question" style="color:#CFD4DD;margin:0 5px"></span> -->
                                                    <el-tag size="mini" type="info" v-if="item.retargeting_tags_op=='INCLUDE'">定向</el-tag>
                                                    <el-tag size="mini" type="info" v-else-if="item.retargeting_tags_op=='EXCLUDE'">排除</el-tag>
                                                </div>
                                                <div class="talent_fans flexbox flexcenter">
                                                    <span class="font_13">预估覆盖人群 {{item.cover_num | unitText}}<span style="margin-left:10px">ID</span>:{{item.retargeting_tags_id}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div v-if="createform.audience.crowdTab==2" key="zdyrq">
                            <div class="flexbox flexcenter" style="height:56px;padding:0 12px">
                                <el-input size="small" placeholder="输入人群包名称" prefix-icon="el-icon-search" clearable v-model="crowdQuery">
                                </el-input>
                            </div>
                            <div v-loading="zdy_loadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                                <div class="over_box" style="height:195px">
                                    <div class="crowd_list flexbox flexcenter flexbetween" v-for="(item,index) in filterCustomCrowd(createform.audience.customCrow)" :key="index">
                                        <div class="crowd_left">
                                            <div class="crowd_name">{{item.name}}</div>
                                            <div class="crowd_num">预估覆盖人群 {{item.cover_num | unitText}}<span style="margin-left:10px">ID</span>:{{item.retargeting_tags_id}}</div>
                                        </div>
                                        <div class="crowd_right">
                                            <el-link type="primary" :disabled="item.retargeting_tags_op=='INCLUDE'" :underline="false" @click="addCustomCrowd('INCLUDE',index,item)">定向</el-link>
                                            <el-link type="primary" :disabled="item.retargeting_tags_op=='EXCLUDE'" :underline="false" @click="addCustomCrowd('EXCLUDE',index,item)">排除</el-link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="cascader_right" style="width:226px">
                        <div class="cas_header2 flexcolumn flexbox flexjust">
                            <div class="flexbox flexcenter flexbetween">
                                <div>已选 <el-link type="primary" :underline="false">{{createform.audience.allCrowdCheck.length}}</el-link> 个</div>
                                <el-link type="primary" :underline="false" @click="clearCrowd">清空</el-link>
                            </div>
                        </div>
                        <div class="cas_header flexbox flexcenter">
                            <span class="flex">人群包</span>
                            <div style="width:60px">
                                <el-dropdown>
                                    <span class="color_01">
                                        <template v-if="createform.audience.crowdDrop=='ALL'">
                                            全部
                                        </template>
                                        <template v-else-if="createform.audience.crowdDrop=='INCLUDE'">
                                            定向
                                        </template>
                                        <template v-else-if="createform.audience.crowdDrop=='EXCLUDE'">
                                            排除
                                        </template>
                                        <i class="el-icon-caret-bottom el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :class="{'active':createform.audience.crowdDrop=='ALL'}" @click.native="checkCrowdDrop('ALL')">全部</el-dropdown-item>
                                        <el-dropdown-item :class="{'active':createform.audience.crowdDrop=='INCLUDE'}" @click.native="checkCrowdDrop('INCLUDE')">定向</el-dropdown-item>
                                        <el-dropdown-item :class="{'active':createform.audience.crowdDrop=='EXCLUDE'}" @click.native="checkCrowdDrop('EXCLUDE')">排除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>

                        </div>
                        <div class="has_talent_box over_box" style="height:212px">
                            <div class="has_talent_item flexbox flexcenter" v-for="(item,index) in filterAllCrowd(createform.audience.allCrowdCheck,createform.audience.crowdDrop) " :key="index">
                                <div class="has_talent_name flex">{{item.name}}</div>
                                <div class="has_talent_num flexbox flexbetween" style="width:60px">
                                    <span v-if="item.retargeting_tags_op=='INCLUDE'">定向</span>
                                    <span v-else-if="item.retargeting_tags_op=='EXCLUDE'">排除</span>
                                    <el-link :underline="false" icon="el-icon-close" @click="deletCrowdCheck(item,index)"></el-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-form-item>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform","pt_loadding","zdy_loadding"],
    name: "",
    data() {
        return {
            crowdQuery: "", //自定义人群包搜索
        };
    },
    created() {},
    methods: {
        getPlamCrow(){
            this.$emit("getPlamCrow")
        },
        getCustomCrow(){
            this.$emit("getCustomCrow")
        },

        // 切换人群包
        changeCrowd() {
            this.crowdQuery = "";
            if (this.createform.audience.crowdRadio == 2) {
                this.getPlamCrow();
                this.getCustomCrow();
            }
            this.sessionSave();
        },

        //选择平台精选人群
        checkPlartCrowd(v) {
            let list = v;
            let list2 = this.createform.audience.plartformCrow;
            let newArr = list2.filter(function (n) {
                return list.indexOf(n.retargeting_tags_id + "") != -1;
            });
            this.createform.audience.plartformText = newArr;
            this.createform.audience.allCrowdCheck =
                this.createform.audience.plartformText.concat(
                    this.createform.audience.customCrowdText
                );
            this.sessionSave();
        },

        // 自定义人群包搜索
        filterCustomCrowd(list) {
            var list = list,
                query = this.crowdQuery;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name.indexOf(query) !== -1 || item.retargeting_tags_id == query) {
                    return item;
                }
            });
            return list;
        },

        // 选择自定义人群包
        addCustomCrowd(type, index, item) {
            let flag = false;
            let on = null;
            let list = this.createform.audience.customCrowdText;
            item.retargeting_tags_op = type;
            for (let i in list) {
                if (list[i].retargeting_tags_id == item.retargeting_tags_id) {
                    flag = true;
                    on = i;
                    break;
                }
            }
            if (flag) {
                list[on] = item;
            } else {
                list.push(item);
            }
            this.createform.audience.allCrowdCheck =
                this.createform.audience.plartformText.concat(list);
            this.sessionSave();
        },

        

        // 人群删除
        deletCrowdCheck(item, index) {
            let b = this.createform.audience.plartformVal.filter((it) => {
                if (it != item.retargeting_tags_id) {
                    return it;
                }
            });
            let c = this.createform.audience.plartformText.filter((it) => {
                if (it.retargeting_tags_id != item.retargeting_tags_id) {
                    return it;
                }
            });
            let d = this.createform.audience.customCrowdText.filter((it) => {
                if (it.retargeting_tags_id != item.retargeting_tags_id) {
                    return it;
                }
            });
            let num = this.createform.audience.customCrow.findIndex(
                (val) => val.retargeting_tags_id == item.retargeting_tags_id
            );
            this.createform.audience.plartformVal = b;
            this.createform.audience.plartformText = c;
            this.createform.audience.customCrowdText = d;
            if (num != -1) {
                this.createform.audience.customCrow[num].retargeting_tags_op =
                    "ALL";
            }
            this.createform.audience.allCrowdCheck.splice(index, 1);
            this.sessionSave();
        },

        // 已选人群包筛选
        checkCrowdDrop(type) {
            this.createform.audience.crowdDrop = type;
        },

        // 已选人群包筛选
        filterAllCrowd(list, type) {
            var list = list,
                query = type;

            if (type == "ALL") {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.retargeting_tags_op == query) {
                    return item;
                }
            });
            return list;
        },

        // 清空人群包
        clearCrowd() {
            this.createform.audience.plartformVal = [];
            this.createform.audience.plartformText = [];
            this.createform.audience.customCrowdText = [];
            this.createform.audience.allCrowdCheck = [];
            for (let i in this.createform.audience.customCrow) {
                this.createform.audience.customCrow[i].retargeting_tags_op =
                    "ALL";
            }
            this.sessionSave();
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

